<template>
	<div class="activity-examine">
		<a-scrollbar style="overflow: auto">
			<a-form :model="form" auto-label-width label-align="left">
				<div class="form-control">
					<div class="form-left">
						<a-row>
							<a-col :span="24">
								<a-row :gutter="24">
									<a-col :span="8">
										<a-form-item field="name" label="账号">
											<a-input v-model="form.userSearchText" placeholder="手机号/用户名/用户ID" />
										</a-form-item>
									</a-col>
									<a-col :span="8">
										<a-form-item field="name" label="活动ID">
											<a-input v-model="form.activityId" placeholder="活动ID" />
										</a-form-item>
									</a-col>
									<a-col :span="8">
										<a-form-item field="name" label="标题">
											<a-input v-model="form.title" placeholder="活动标题" />
										</a-form-item>
									</a-col>
								</a-row>
								<a-row :gutter="24">
									<a-col :span="8">
										<a-form-item field="name" label="公开类型">
											<a-select v-model="form.openType" placeholder="全部">
												<a-option value="">全部</a-option>
												<a-option value="1">公开</a-option>
												<a-option value="2">私有</a-option>
											</a-select>
										</a-form-item>
									</a-col>
									<a-col :span="8">
										<a-form-item field="name" label="活动状态">
											<a-select v-model="form.activityStatus" placeholder="全部">
												<a-option value="">全部</a-option>
												<a-option :value="0">未开始</a-option>
												<a-option :value="1">进行中</a-option>
												<a-option :value="2">已结束</a-option>
											</a-select>
										</a-form-item>
									</a-col>
									<a-col :span="8">
										<a-form-item field="name" label="活动类型">
											<a-select v-model="form.memberType" placeholder="全部" multiple>
												<a-option :value="0">测试活动</a-option>
												<a-option :value="1">免费版活动</a-option>
												<a-option :value="2">付费版活动</a-option>
											</a-select>
										</a-form-item>
									</a-col>
								</a-row>
								<a-row :gutter="24">
									<a-col :span="8">
										<a-form-item field="name" label="创建日期">
											<a-range-picker
												v-model="form.date"
												format="YYYY-MM-DD"
												value-format="timestamp"
												:allow-clear="false"
											/>
										</a-form-item>
									</a-col>
								</a-row>
							</a-col>
						</a-row>
					</div>
					<div class="form-right">
						<a-button type="primary" @click="onSearchClick">查询</a-button>
						<a-button @click="resetForm">重置</a-button>
					</div>
				</div>
			</a-form>
			<div class="form-control">
				<div class="form-left">
					<a-form-item :hide-label="true">
						<a-radio-group v-model="form.publishStatus" type="button" @change="onSearchClick">
							<a-radio value="1">发布中</a-radio>
							<a-radio value="0">未发布</a-radio>
							<a-radio value="2">已删除</a-radio>
						</a-radio-group>
					</a-form-item>
				</div>
				<div class="form_right">
					<a-form-item :hide-label="true">
						<copy-case />
					</a-form-item>
				</div>
			</div>
			<a-table
				class="design__table"
				:columns="activityColumns"
				:data="activityData"
				:scroll="{ x: '100%', y: '100%' }"
				:pagination="false"
			>
				<template #ticketCountTitle>
					<div class="ticket_count_title">
						<div>门票数</div>
						<div class="icons">
							<icon-caret-up
								class="icon icon_top"
								:class="{ active: form.ticketNumSort === 0 }"
								@click="countSort(0)"
							/>
							<icon-caret-down
								class="icon icon_bottom"
								:class="{ active: form.ticketNumSort === 1 }"
								@click="countSort(1)"
							/>
						</div>
					</div>
				</template>
				<template #activityName="{ record }">
					<div class="activity-name-wraper" @click="gotoActivity(record)">
						<img :src="record.bannerUrl" alt="" />
						<span>{{ record.title }}</span>
					</div>
				</template>
				<template #activitySign="{ record }">
					<a :href="`${env.host}/${record.id}/sign`" target="_blank">链接</a>
				</template>
				<template #activityTime="{ record }">
					<span>{{ filterTime(record.startTime) }}至{{ filterTime(record.endTime) }}</span>
				</template>
				<template #createTime="{ record }">
					<span>{{ filterTime(record.createTime) }}</span>
				</template>
				<template #ticketCount="{ record }">
					<span>{{ record.ticketSaleNum }}/{{ record.ticketTotalNum }}</span>
				</template>
				<template #status="{ record }">
					<span
						class="table-dot"
						:class="[
							record.status === 1 ? 'table-dot--green' : '',
							record.status === 0 ? 'table-dot--yellow' : '',
							record.status === 2 ? 'table-dot--grey' : '',
						]"
					></span>
					<span>{{ activityStatusMaps[record.status] }}</span>
				</template>
				<template #publishStatus="{ record }">
					<span>{{ record.isDelete ? '已删除' : publishStatus[record.publishStatus] }}</span>
				</template>
				<template #operation="{ record }">
					<template v-if="record.publishStatus && !record.isDelete">
						<span
							v-if="record.copyStatus === 0"
							class="operation-item"
							:class="{ 'operation-item--disabled': !isLibraryAdmin }"
							@click="copyToCaseLibrary(record.id)"
							>复制为案例</span
						>
						<span v-else-if="record.copyStatus === 1" class="operation-item operation-item--disabled"
							>复制中</span
						>
						<span v-else-if="record.copyStatus === 2" class="operation-item operation-item--disabled"
							>已复制</span
						>
						<span v-else-if="record.copyStatus === 3" class="operation-item operation-item--red"
							>复制失败</span
						>
					</template>
					<span
						v-if="record.publishStatus"
						class="operation-item operation-item--red"
						@click="cancelPublishActivity(record.id, 0)"
						>取消发布</span
					>
					<span
						v-else-if="!record.isDelete"
						class="operation-item"
						@click="cancelPublishActivity(record.id, 1)"
						>发布</span
					>
					<span
						v-if="!record.isDelete"
						class="operation-item operation-item--red"
						@click="deleteActivity(record.id)"
						>删除</span
					>
					<span v-else class="operation-item" @click="recoverActivity(record.id)">删除恢复</span>
				</template>
			</a-table>
		</a-scrollbar>
		<div class="account-examine__pagination">
			<span class="total-tips">共{{ total }}条</span>
			<a-pagination v-model:current="current" :total="total" @change="getActivityExamineList" />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive, Ref } from 'vue';
import { activity, errors } from '@/api';
import env from '@/api/config';
import dateFormat from 'ourwill-feutil/common/dateFormat';
import { Message } from '@arco-design/web-vue';
import copyCase from '@/components/caseModule/copyCase.vue';
import { useUserStore } from '@/store';
import { toRefs } from 'vue';
import { computed } from 'vue';
const userStore = useUserStore();
const { isLibraryAdmin, adminInfo } = toRefs(userStore);

const now = new Date().getTime();
const twoMonthsAgo = now - 2 * 30 * 24 * 60 * 60 * 1000;

const form: Ref<{ [key: string]: any }> = ref({
	userSearchText: '',
	activityId: '',
	title: '',
	openType: '',
	activityStatus: '',
	publishStatus: '1',
	// payType: "",
	memberType: [1, 2],
	date: [twoMonthsAgo, now],
	ticketNumSort: null,
});
const resetForm = () => {
	form.value = {
		userSearchText: '',
		activityId: '',
		title: '',
		openType: '',
		activityStatus: '',
		publishStatus: '1',
		// payType: "",
		memberType: [1, 2],
		date: [],
		ticketNumSort: null,
	};
	getActivityExamineList();
};
const activityStatusMaps: any = {
	0: '未开始',
	1: '进行中',
	2: '已结束',
};
const publishStatus: any = {
	0: '未发布',
	1: '发布中',
};
const activityColumns = computed(() => {
	let list: any = [
		{
			title: '活动名称',
			slotName: 'activityName',
			width: 343,
		},
		{
			title: '报名页预览',
			slotName: 'activitySign',
			width: 120,
		},
		{
			title: '活动ID',
			dataIndex: 'id',
			width: 100,
		},
		{
			title: '创建日期',
			slotName: 'createTime',
			width: 120,
		},
		{
			title: '活动日期',
			slotName: 'activityTime',
			width: 237,
		},
		{
			titleSlotName: 'ticketCountTitle',
			title: '门票数',
			slotName: 'ticketCount',
			width: 136,
		},
		{
			title: '活动状态',
			slotName: 'status',
			width: 136,
		},
		{
			title: '发布状态',
			slotName: 'publishStatus',
			width: 148,
		},
	];
	if ([0, 1].includes(Number(adminInfo.value?.adminType))) {
		list.push({
			title: '操作',
			slotName: 'operation',
			width: 250,
			fixed: 'right',
		});
	}
	return list;
});
const activityData = ref([]);

const total = ref<number>(0);
const current = ref<number>(1);
const onSearchClick = () => {
	current.value = 1;
	getActivityExamineList();
};

const filterTime = (val: any) => {
	if (!val) {
		return '--';
	}

	return dateFormat(val);
};

const getActivityExamineList = async () => {
	const params: any = {
		pageNum: current.value,
		pageSize: 10,
		userSearchText: form.value.userSearchText,
		activityId: form.value.activityId,
		title: form.value.title,
		openType: form.value.openType,
		activityStatus: form.value.activityStatus,
		// payType: form.value.payType,
		memberType: form.value.memberType && form.value.memberType.length ? form.value.memberType.join(',') : '0,1,2',
		isDelete: '',
		publishStatus: '',
		startTime: form.value.date[0],
		endTime: form.value.date[1],
		ticketNumSort: form.value.ticketNumSort,
	};

	if (form.value.publishStatus === '2') {
		params.isDelete = '1';
	} else {
		params.publishStatus = form.value.publishStatus;
	}
	const { ok, data } = await activity.getActivityExamineList(params);
	if (!ok) {
		return;
	}
	activityData.value = data.data.records;
	total.value = data.data.total;
};
getActivityExamineList();
const recoverActivity = async (activityId: number) => {
	const { ok, data } = await activity.recoverActivity(activityId);
	if (!ok) {
		return;
	}
	Message.success('恢复成功');
	getActivityExamineList();
};

const deleteActivity = async (activityId: number) => {
	const { ok, data } = await activity.deleteActivity(activityId);
	if (!ok) {
		return;
	}
	Message.success('删除成功');
	getActivityExamineList();
};

const cancelPublishActivity = async (activityId: number, status: number) => {
	const { ok, data } = await activity.cancelPublishActivity(activityId, status);
	if (!ok) {
		return;
	}
	if (+status === 0) {
		Message.success('取消发布成功');
	} else {
		Message.success('发布成功');
	}
	getActivityExamineList();
};

const gotoActivity = (record: any) => {
	if (!record.id) {
		return;
	}
	let url = `${env.host}/manage/#/index/activityManage/activity/${record.id}`;
	window.open(url, '_blank');
};

const copyToCaseLibrary = async (activityId: number) => {
	if (!isLibraryAdmin.value) {
		Message.error('非案例库管理员，无法复制案例');
		return;
	}
	try {
		const { data, ok } = await activity.addToCaseLibrary({ activityId });
		if (!ok) {
			return;
		}
		Message.success('复制成功');
	} catch (error) {
		errors(error);
	}
};

const countSort = (num: number) => {
	if (form.value.ticketNumSort === num) {
		form.value.ticketNumSort = null;
		getActivityExamineList();
		return;
	}
	form.value.ticketNumSort = num;
	getActivityExamineList();
};
</script>
<style lang="less">
.activity-examine {
	.form-control {
		display: flex;
		border-bottom: 1px solid #eaeaea;
		margin-bottom: 20px;

		.form-left {
			flex: 1;
		}

		.form-right {
			width: 107px;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			position: relative;

			&::before {
				content: '';
				display: block;
				width: 1px;
				height: 134px;
				background: #d9d9d9;
				position: absolute;
				left: 23px;
			}

			.arco-btn {
				& + .arco-btn {
					margin-top: 20px;
				}
			}
		}
	}
	.design__table {
		.ticket_count_title {
			display: flex;
			align-items: center;
			.icons {
				position: relative;
				display: flex;
				flex-direction: column;
				margin-left: 8px;
				.icon {
					cursor: pointer;
					&.active {
						color: #165dff;
					}
				}
				.icon_top {
					position: absolute;
					top: -12px;
				}
				.icon_bottom {
					position: absolute;
					bottom: -12px;
				}
			}
		}
	}
	.activity-name-wraper {
		display: flex;
		align-items: center;
		cursor: pointer;
		span {
			word-break: break-word;
		}
		img {
			margin-right: 16px;
			width: 124px;
		}
	}

	.table-dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin-right: 8px;

		&--green {
			background-color: #38ca29;
		}

		&--yellow {
			background-color: #ffb53c;
		}

		&--grey {
			background-color: #bfbfbf;
		}
	}

	.operation-item {
		color: #386cff;
		cursor: pointer;
		font-size: 14px;

		& + .operation-item {
			margin-left: 16px;
		}

		&--disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		&--red {
			color: #ff3c3c;
		}
	}
}
</style>
